---
description: Компонент для загрузки файлов.
---

<Overview group="forms">

# File [tag:component]

Компонент для загрузки файлов (реализует нативный элемент `<input type="file" />` и принимает все валидные для этого
элемента свойства). Представляет собой кнопку, при нажатии на которую открывается стандартный диалог выбора файла.

В основе используется компонент [`Button`](/components/button) и принимает все доступные для этого компонента свойства.

</Overview>

<Playground>
  ```jsx
  <File>Выберите файл</File>
  ```
</Playground>


## Кастомизация

Компонент поддерживает свойство `slotProps`, которое даёт возможность прокинуть свойство в некоторые внутренние элементы.
Это удобно для добавления кастомных классов, data-атрибутов, aria-атрибутов, обработчиков событий, доступов к элементам через `getRootRef` и других расширений, не влияя на внешний API компонента.

<Playground>
  ```jsx
  const inputRef = React.useRef();

  return (
    <File
      className="my-root-class"
      data-testid="file-root"
      id="file-input-id"
      slotProps={{
        root: {
          id: 'file-root-id',
        },
        input: {
          className: 'my-input-class',
          'aria-label': 'file',
          getRootRef: inputRef,
        },
      }}
    >
      Выберите файл
    </File>
  )
  ```
</Playground>

## Доступность (a11y) [#a11y]

Компонент обеспечивает базовую доступность благодаря использованию нативного элемента `<input type="file" />`.
Старайтесь оборачивать компонент в `FormItem` или используйте свойства `aria-describedby`/`aria-labelledby` для
предоставления понятного текста, описывающего ожидаемое действие.

## Свойства и методы [#api]

<PropsTable name="File" />
